
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { 
  AlertTriangle, 
  Clock, 
  CheckCircle, 
  MapPin,
  ArrowRight
} from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";

export default function PriorityTasks({ crossingPoints, schemes, isLoading }) {
  console.log(crossingPoints, schemes, isLoading,'crossingPoints, schemes, isLoading');
  
  const getPriorityColor = (priority) => {
    const colors = {
      urgent: "bg-red-100 text-red-700 border-red-200",
      high: "bg-orange-100 text-orange-700 border-orange-200",
      medium: "bg-yellow-100 text-yellow-700 border-yellow-200",
      low: "bg-green-100 text-green-700 border-green-200"
    };
    return colors[priority] || colors.medium;
  };

  const getPriorityLabel = (priority) => {
    const labels = {
      urgent: "紧急",
      high: "高",
      medium: "中",
      low: "低"
    };
    return labels[priority] || "低";
  };

  const getStatusColor = (status) => {
    const colors = {
      planning: "bg-gray-100 text-gray-700",
      designed: "bg-blue-100 text-blue-700",
      approved: "bg-green-100 text-green-700",
      construction: "bg-orange-100 text-orange-700",
      completed: "bg-purple-100 text-purple-700"
    };
    return colors[status] || colors.planning;
  };

  // Get high priority crossing points
  const priorityCrossings = crossingPoints
    .filter(cp => cp.priority === 'high' || cp.priority === 'urgent')
    .slice(0, 5);

  // Get pending schemes
  const pendingSchemes = schemes
    .filter(s => s.approvalStatus === 'draft' || s.approvalStatus === 'review')
    .slice(0, 3);

  return (
    <Card className="shadow-lg border-0">
      <CardHeader className="bg-gradient-to-r from-red-50 to-orange-50 border-b">
        <CardTitle className="flex items-center gap-2 text-lg">
          <AlertTriangle className="w-5 h-5 text-red-600" />
          优先任务
        </CardTitle>
      </CardHeader>
      
      <CardContent className="p-6">
        {isLoading ? (
          <div className="space-y-4">
            {Array(4).fill(0).map((_, i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-3 w-1/2" />
              </div>
            ))}
          </div>
        ) : (
          <div className="space-y-6">
            {/* High Priority Crossing Points */}
            {priorityCrossings.length > 0 && (
              <div>
                <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                  <MapPin className="w-4 h-4 text-red-600" />
                  高优先级跨越点
                </h3>
                <div className="space-y-3">
                  {priorityCrossings.map((crossing) => (
                    <div key={crossing.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div>
                        <Link to={createPageUrl(`CrossingPoints?id=${crossing.id}`)} className="font-medium text-gray-900 text-sm mb-1 hover:text-blue-600">
                          {crossing.name}
                        </Link>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className={`${getPriorityColor(crossing.priority)} border text-xs`}>
                            {getPriorityLabel(crossing.priority)}优先级
                          </Badge>
                          <span className="text-xs text-gray-500">
                            {crossing.crossingObject}
                          </span>
                        </div>
                      </div>
                      <Link to={createPageUrl(`CrossingPoints?id=${crossing.id}`)}>
                        <Button variant="ghost" size="icon" className="w-6 h-6">
                          <ArrowRight className="w-3 h-3" />
                        </Button>
                      </Link>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Pending Schemes */}
            {pendingSchemes.length > 0 && (
              <div>
                <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                  <Clock className="w-4 h-4 text-orange-600" />
                  待审批方案
                </h3>
                <div className="space-y-3">
                  {pendingSchemes.map((scheme) => (
                    <div key={scheme.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div>
                        <Link to={createPageUrl(`SchemeAnalysis?id=${scheme.id}`)} className="font-medium text-gray-900 text-sm mb-1 hover:text-blue-600">
                          {scheme.name}
                        </Link>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="bg-orange-100 text-orange-700 border-orange-200 text-xs">
                            {scheme.approvalStatus === 'draft' ? '草稿' : '审核中'}
                          </Badge>
                          <span className="text-xs text-gray-500">
                            {scheme.constructionMethod}
                          </span>
                        </div>
                      </div>
                       <Link to={createPageUrl(`SchemeAnalysis?id=${scheme.id}`)}>
                        <Button variant="ghost" size="icon" className="w-6 h-6">
                          <ArrowRight className="w-3 h-3" />
                        </Button>
                      </Link>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {priorityCrossings.length === 0 && pendingSchemes.length === 0 && (
              <div className="text-center py-8">
                <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-3" />
                <p className="text-gray-500 mb-2">暂无紧急任务</p>
                <p className="text-sm text-gray-400">所有任务都在正常进行中</p>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
